<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      border: 1px solid cadetblue;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div class="box test-1" style="width: 20px;">

  </div>
</body>
</html>
<script>
// 英文：contains  - 包含  约等于 includes

// *** toggle -> 切换；“思想”-> 本质就是 取反

// 关于 style
// 需求：通过 JS 获取 .box 的宽和高
var box = document.querySelector('.box');

  // box.style.xx ->  只能获取到 DOM 元素 的行内样式；class 中的值无法获取

  // getComputedStyle(box).xx -> 既可获取到 class 中的 样式， 也可获取 DOM元素行内标签的 样式

// -------------------------------------
// 关于 class
// 需求：通过 JS 获取 和 设置 box 的 className
  // 获取：box.className
  // 设置：增加新的 class，名为 test-02
  // box.className += ' test-02';

// dom.classList
  //  向 box 中增加 新的 class
  box.classList.add('add-02');
  box.classList.add('add-03');

  // 判断 class 是否存在于 box 中，返回值为 布尔值
  box.classList.contains('add-04')

  // 移除 box 上指定的 class
  // box.classList.remove('add-02', 'box')

  // ** toggle **：若不存在 'add-04' ，则向  box  中 添加 该 class
    // 若存在 该 class, 则 删除该 class
  box.classList.toggle('add-04')

  setTimeout(function() {
    box.classList.toggle('add-04')
  }, 1000)

</script>